<template>
	<view>
		<view class="title">
			<h1>期待您给我们这一次服务打分！</h1>
		</view>
		<!-- 打分区域 -->
		<view class="score">
			<view class="scoreList">
				<text>响应速度：</text>
				<u-rate :count="count" v-model="value1" gutter="20" @change="changeData"></u-rate>
			</view>
			<view class="scoreList">
				<text>服务态度：</text>
				<u-rate :count="count" v-model="value2" gutter="20" @change="changeData"></u-rate>
			</view>
			<view class="scoreList">
				<text>技术能力：</text>
				<u-rate :count="count" v-model="value3" gutter="20" @change="changeData"></u-rate>
			</view>
		</view>
		<!-- 反馈区域 -->
		<view class="textBox">
			<textarea :value="textDetail" @input="inputDetail" placeholder="期待你的建议或反馈(非必填)" />
		</view>
		<!-- 添加图片区域 -->
		<view class="cateList">
			添加图片(非必选)：
		</view>
		<view class="imgContainer">
			<view class="imgButton" @click="chooseImg">
				<text class="iconfont icon-paizhaoshangchuan"></text>
			</view>
			<view class='imageInfo' v-for="(value,index) in imgItem" :key="index">
				<image :src="value" :data-index="index" mode="aspectFill" @click="imgPreview(index,imgItem)">
					<!-- <icon type='cancel' ></icon> -->
					<u-icon name="close-circle" class="delete-btn" @click="deletePic(index)" :data-pic_index='index'>
					</u-icon>
				</image>
			</view>
		</view>
		<!-- 提交按钮 -->
		<view class="evaluateBtn">
			<u-button @click="submitEvaluate">提交评价</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count: 5,
				value1: 0,
				value2: 0,
				value3: 0,
				imgItem: [],
				orderId: '',
				openId: '',
				textDetail: ''
			}
		},
		onLoad(option) {
			this.openId = uni.getStorageSync('openId');
			this.orderId = option.orderId;
			console.log(option);
			console.log('获取到了什么？');
		},
		methods: {
			//文本域数据信息
			inputDetail(e) {
				this.textDetail = e.detail.value;
				console.log(this.textDetail);
			},
			//状态校验
			evaluteScore() {
				if (this.value1 == 0) {
					uni.showToast({
						title: '请先给响应速度打分！',
						icon: 'none',
						duration: 1000
					})
					return;
				}

				if (this.value2 == 0) {
					uni.showToast({
						title: '请先给服务态度打分！',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				if (this.value3 == 0) {
					uni.showToast({
						title: '请先给技术能力打分！',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				if (this.value1 && this.value2 && this.value3) {
					console.log('通过了！');
					return true;
				}
			},
			//提交评价
			submitEvaluate() {
				let that = this;
				const flag = this.evaluteScore();
				console.log(that.value1);
				console.log(that.value2);
				console.log(that.value3);
				console.log(that.textDetail);
				console.log('给一点反应：');
				console.log(that.openId);
				console.log(that.imgItem);
				console.log(that.orderId);
				if (flag) {
					uni.request({
						url: 'https://zioncloud.top/repair/order/comment',
						method: "POST",
						data: {
							text: that.textDetail,
							score1: that.value1,
							score2: that.value2,
							score3: that.value3,
							openId: that.openId,
							imgList: that.imgItem,
							orderId: that.orderId
						},
						success(res) {
							console.log(res);
							console.log('评价');
							//上传图片
							let num = 0;
							that.imgItem.forEach(async function(value, index) {
								await uni.uploadFile({
									url: 'https://zioncloud.top/repair/order/commentUpload',
									filePath: value,
									name: 'img',
									header: {},
									formData: {
										orderId: that.orderId,
										openId: that.openId,
										path: value
									},
									success(res) {
										console.log(res);
										console.log('前方数据');
										num = num + 1;
										if (num == that.imgItem.length) {
											uni.showToast({
												title: '成功提交！',
												icon: 'success',
												duration: 1000
											})
										}
									}
								});

							});
							uni.setStorageSync('evaluateId', true);
							uni.navigateBack({
								delta: 1
							})
						}
					})
				}
			},
			changeData(e) {
				console.log(e);
			},
			//选择图片
			chooseImg() {
				let that = this;
				uni.chooseImage({
					count: 5, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: function(res) {
						that.imgItem = res.tempFilePaths;
						console.log(that.imgItem);
					}
				});
			},
			//预览图片
			imgPreview(index, imgItem) {
				uni.previewImage({
					current: index,
					urls: imgItem
				})
			},
			//删除图片
			deletePic(index) {
				var pic_index = index;
				var upload_pic = [];
				console.log('删除')
				for (let i in this.imgItem) {
					// 将没有被删除的图片放入新数组
					if (i != pic_index) {
						upload_pic.push(this.imgItem[i]);
					}
				}
				this.imgItem = upload_pic;
				console.log(this.imgItem);
			}
		}
	}
</script>
<style>
	.title {
		text-align: center;
		font-weight: 600;
		margin-bottom: 30rpx;
	}

	.score {
		margin-left: 45rpx;
	}

	.scoreList {
		margin-top: 20rpx;
	}

	.textBox {
		border: #eee solid 1rpx;
		padding: 15rpx;
		width: 90%;
		height: 150rpx;
		margin-left: 45rpx;
		margin-top: 30rpx;
	}

	.textBox textarea {
		height: 100%;
		width: 100%;
	}

	/* 图片预览 */
	.cateList {
		margin-left: 35rpx;
		margin-top: 15rpx;
	}

	.imgContainer {
		width: 90%;
		padding: 10rpx;
		margin: 20rpx 30rpx 0 35rpx;
		border: 1px solid #ccc;
		border-radius: 25rpx;
		overflow: auto;
		background-color: #fff;
	}

	.imgContainer:hover {
		border: 1px solid gray;
	}

	.imgButton {
		float: left;
		width: 18%;
		height: 120rpx;
		margin: 2rpx 6rpx;
	}

	.imgButton text {
		/* padding: 20rpx; */
		width: 100%;
		height: 120rpx;
		line-height: 120rpx;
		font-size: 100rpx;
		text-align: center;
	}

	.imageInfo {
		position: relative;
		border: 1rpx solid #ccc;
		border-radius: 2rpx;
		width: 18%;
		height: 120rpx;
		margin: 2rpx 6rpx;
		float: left;
		border-radius: 5rpx;
	}

	.imageInfo image {
		width: 100%;
		height: 100%;
	}

	.delete-btn {
		position: absolute;
		font-size: 40rpx;
		top: 0;
		right: 0;
		color: red;
	}

	/* 提交按钮 */
	.evaluateBtn {
		position: absolute;
		width: 50%;
		bottom: 15%;
		left: 50%;
		transform: translate(-50%, 0);
	}
</style>
